// 引入math方法
// @use 'sass:math';

$speed: 8s;
$wordCount: 4;

/*样式*/
.css-box-sub1 {
      width: 100%;
      height: 100%;
      overflow: auto;
      position: relative;
      &::-webkit-scrollbar {
            /*滚动条整体样式*/
            width: 8px; /*高宽分别对应横竖滚动条的尺寸*/
            height: 1px;
      }
      &::-webkit-scrollbar-thumb {
            /*滚动条里面小方块*/
            border-radius: 10px;
            background: #cfcfcf;
      }
      .ant-collapse-content-box {
            position: relative;
            z-index: 1;
            background-color: #fff;
      }
      //渐变+超行
      .iframe-box1 {
            width: 200px;
            float: left;
            height: 70px;
            margin: 20px 0 0 20px;
            .css-sub {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: -webkit-box;
                  -webkit-line-clamp: 2;
                  -webkit-box-orient: vertical;
                  h2:nth-child(2) {
                        background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                  }
            }
      }
      //旋转
      .iframe-box2 {
            width: 200px;
            margin: 20px 0 0 20px;
            height: 70px;
            float: left;
            .css-sub {
                  width: 100px;
                  height: 100px;
                  margin-left: 20px;
                  background-color: rgb(147, 194, 233);
                  .text {
                        width: 100px;
                        height: 100px;
                        background-color: rgb(102, 119, 133);
                        transition: transform 2s;
                        &:hover {
                              transform: rotate3d(0, 0, 1, 60deg);
                        }
                  }
            }
      }
      // 毛玻璃
      .iframe-box3 {
            float: left;
            width: 400px;
            height: 70px;
            margin: 20px 0 0 20px;
            .css-sub {
                  width: 350px;
                  height: 200px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  background: url('../../assets/image/luori.jpg') no-repeat;
                  background-size: 100%;
                  background-position: center;
                  .maoboli {
                        width: 40%;
                        height: 40%;
                        border-radius: 40px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        font-size: 26px;
                        letter-spacing: 0.5em;
                        --webkit-backdrop-filter: blur(10px);
                        color: #fff;
                        box-shadow: 0 0 30px 10px rgba(0, 0, 0, 0.3);
                        .text {
                              color: rgba(0, 0, 0, 0);
                              text-shadow: 0 0 12px #000;
                              cursor: default;
                              transition: color 0.3s ease, text-shadow 0.3s ease;
                              &:hover {
                                    color: rgb(255, 255, 255);
                                    text-shadow: none;
                              }
                        }
                  }
            }
      }
      //背景渐变
      .iframe-box4 {
            width: 200px;
            height: 70px;
            float: left;
            margin: 20px 0 0 20px;
            .css-sub {
                  width: 165px;
                  height: 165px;
                  //径向渐变
                  background: -webkit-radial-gradient(center, #fd8403, yellow);
            }
      }
      //隧道样式
      .iframe-box5 {
            width: 200px;
            height: 70px;
            float: left;
            margin: 20px 0 0 20px;
            .css-sub {
                  width: 100px;
                  height: 100px;
                  background-color: #000;
                  .farme {
                        width: 100px;
                        height: 100px;
                        border: 1px solid rgb(0, 255, 162);
                        filter: hue-rotate(calc(24deg * var(--i)));
                        position: absolute;
                        pointer-events: none;
                        transform-style: preserve-3d;
                        animation: suidao-move 30s linear infinite calc(1s * var(--i) - 30s);
                  }
                  /* 动画 */
                  @keyframes suidao-move {
                        0% {
                              transform: perspective(1000px) translateZ(0px);
                        }
                        100% {
                              transform: perspective(1000px) translateZ(1000px) rotate(180deg);
                        }
                  }
            }
      }
      // 梯形
      .iframe-box6 {
            width: 100px;
            height: 70px;
            float: left;
            margin: 20px 0 0 20px;
            .css-sub {
                  width: 70px;
                  height: 70px;
                  background-color: transparent;
                  border-top: 20px solid rgba(255, 0, 0, 0);
                  border-right: 20px solid rgba(255, 255, 0, 0);
                  border-bottom: 20px solid green;
                  border-left: 20px solid rgba(255, 192, 203, 0);
            }
      }
      // 渐变边框
      .iframe-box7 {
            width: 200px;
            height: 70px;
            float: left;
            margin: 20px 0 0 20px;
            .css-sub {
                  // width: 50px;
                  // height: 50px;
                  // background-clip: padding-box, border-box;
                  // background-origin: padding-box, border-box;
                  // background-image: linear-gradient(135deg, #000, #000),
                  //       linear-gradient(135deg, #e70303, #ffff44);
                  // border-bottom: 2px transparent solid;
                  width: 170px;
                  height: 170px;
                  border: 10px solid;
                  border-image: linear-gradient(red, yellow) 30 30;
            }
      }
      // 盒子超出换行
      .iframe-box8 {
            width: 200px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .all-box {
                  width: 100%;
                  height: 100px;
                  display: flex; //把盒子在一行显示
                  overflow-x: hidden; //超出隐藏
                  flex-wrap: wrap; //超出自动换行
            }
            .css-sub {
                  width: 30px;
                  height: 30px;
                  margin: 5px 3px 0px 0px;
                  background-color: #000;
            }
      }
      // 滚动条样式
      .iframe-box9 {
            width: 200px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .ant-collapse-content-box {
                  width: 100%;
                  height: 100px;
                  background-color: #1b1b1b;
                  overflow: auto;
            }
            .css-sub {
                  width: 100%;
                  height: 150px;
                  background: -webkit-linear-gradient(top, #fd8403, yellow);
            }
            // 滚动条样式  必须写
            ::-webkit-scrollbar {
                  width: 15px;
                  height: 15px;
            }
            //滚动条轨道
            ::-webkit-scrollbar-track {
                  background-color: #ffffff;
                  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            }
            // 滚动条滑块
            ::-webkit-scrollbar-thumb {
                  border-radius: 10px;
                  background-color: pink;
            }
            // 滚动条按钮
            ::-webkit-scrollbar-button {
                  width: 15px;
                  height: 5px;
                  background-color: #fd8403;
            }
      }
      //vertical-align
      .iframe-box10 {
            width: 240px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .ant-collapse-content-box {
                  width: 100%;
                  height: 100px;
                  display: flex; //把盒子在一行显示
                  overflow-x: hidden; //超出隐藏
                  flex-wrap: wrap; //超出自动换行

                  .css-sub {
                        width: 80px;
                        height: 30px;
                        margin-left: 10px;
                        text-align: center;
                        color: #fff;
                        background-color: #000;
                  }
            }
      }
      // shadow霓虹灯效果
      .iframe-box13 {
            width: 360px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  width: 100%;
                  height: 200px;
                  background-color: #111;
                  text-align: center;
                  p:nth-child(2),
                  :nth-child(3) {
                        margin-top: 30px;
                  }
                  p {
                        font-family: 'Lobster';
                        text-align: center;
                        font-size: 40px;
                        line-height: 40px;
                        color: #fff;
                        cursor: pointer;
                        &:hover {
                              color: #fff;
                        }
                  }
                  .pink {
                        filter: brightness(110%);

                        text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #e91e63,
                              0 0 35px #e91e63, 0 0 40px #e91e63, 0 0 50px #e91e63, 0 0 75px #e91e63;
                        animation: pink 1.5s ease-in-out infinite alternate;
                  }
                  .orange {
                        color: #ff5722;
                  }
                  .orange:hover {
                        animation: orange 1.5s ease-in-out infinite alternate;
                  }
                  .yellow {
                        color: #ffeb3b;
                  }
                  .yellow:hover {
                        animation: yellow 1.5s ease-in-out infinite alternate;
                  }
                  @keyframes pink {
                        to {
                              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                                    0 0 40px #e91e63, 0 0 70px #e91e63, 0 0 80px #e91e63,
                                    0 0 100px #e91e63, 0 0 150px #e91e63;
                        }
                  }
                  @keyframes orange {
                        to {
                              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                                    0 0 40px #ff5722, 0 0 70px #ff5722, 0 0 80px #ff5722,
                                    0 0 100px #ff5722, 0 0 150px #ff5722;
                        }
                        from {
                              filter: brightness(110%);
                              text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
                                    0 0 20px #ff5722, 0 0 35px #ff5722, 0 0 40px #ff5722,
                                    0 0 50px #ff5722, 0 0 75px #ff5722;
                        }
                  }
                  @keyframes yellow {
                        to {
                              text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff,
                                    0 0 40px #ffeb3b, 0 0 70px #ffeb3b, 0 0 80px #ffeb3b,
                                    0 0 100px #ffeb3b, 0 0 150px #ffeb3b;
                        }
                        from {
                              filter: brightness(110%);
                              text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff,
                                    0 0 20px #ffeb3b, 0 0 35px #ffeb3b, 0 0 40px #ffeb3b,
                                    0 0 50px #ffeb3b, 0 0 75px #ffeb3b;
                        }
                  }
            }
      }
      // 字体切换过渡
      .iframe-box15 {
            width: 360px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  width: 100%;
                  height: 100px;
                  position: relative;
                  filter: contrast(20);
                  padding: 20px;
                  box-sizing: border-box;
                  background-color: black;
                  .word {
                        font-family: Righteous;
                        color: white;
                        font-size: 30px;
                        text-transform: uppercase;
                        line-height: 1;
                        animation: letterspacing 5s infinite alternate ease-in-out;
                        display: block;
                        position: absolute;
                        left: 10%;
                        top: 25%;
                        transform: translate3d(0%, 19%, 0);
                        letter-spacing: -18px;
                  }
                  @keyframes letterspacing {
                        0% {
                              letter-spacing: -18px;
                              filter: blur(0.3rem);
                        }

                        50% {
                              filter: blur(0.5rem);
                        }

                        100% {
                              letter-spacing: 2px;
                              filter: blur(0rem);
                              color: #fff;
                        }
                  }
            }
      }
      // 快闪融合效果
      .iframe-box16 {
            width: 360px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  position: relative;
                  width: 100%;
                  height: 100px;
                  background: #000;
                  font-family: 'Montserrat', sans-serif;
                  color: #fff;
                  font-size: 20px;
                  filter: contrast(15);
                  .word {
                        position: absolute;
                        top: 30%;
                        left: 39%;
                        animation: contrast-change $speed infinite ease-in-out;
                        @for $i from 0 to $wordCount {
                              &:nth-child(#{$i + 1}) {
                                    // animation-delay: calc($speed / ($wordCount + 1) * $i) - $speed;
                                    animation-delay: math.div($speed, $wordCount + 1) * $i - $speed;
                              }
                        }
                        @keyframes contrast-change {
                              0%,
                              5%,
                              100% {
                                    filter: blur(0px);
                                    opacity: 1;
                              }
                              50%,
                              80% {
                                    filter: blur(80px);
                                    opacity: 0;
                              }
                        }
                  }
            }
      }
      // 单标签实现抖音图标
      .iframe-box17 {
            width: 360px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  background: #111;
                  height: 400px;
                  .douyin {
                        position: relative;
                        width: 37px;
                        height: 218px;
                        z-index: 1;
                        left: 175px;
                        top: 40px;
                        background: #fff;
                        filter: drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);
                        box-shadow: 11.6px 10px 0 0 #fe2d52;
                        // transform: skewX(-5deg);
                        animation: douyin-move 5s infinite ease-in;
                        &::before {
                              content: '';
                              position: absolute;
                              width: 100px;
                              height: 100px;
                              border: 37px solid #fff;
                              border-top: 37px solid transparent;
                              border-radius: 50%;
                              top: 123px;
                              left: -137px;
                              transform: rotate(45deg);
                              filter: drop-shadow(16px 0px 0 #fe2d52);
                        }
                        &::after {
                              content: '';
                              position: absolute;
                              width: 140px;
                              height: 140px;
                              border: 30px solid #fff;
                              border-right: 30px solid transparent;
                              border-top: 30px solid transparent;
                              border-left: 30px solid transparent;
                              top: -100px;
                              right: -172px;
                              border-radius: 100%;
                              transform: rotate(45deg);
                              z-index: -10;
                              filter: drop-shadow(14px 0 0 #fe2d52);
                        }
                        @keyframes douyin-move {
                              4% {
                                    transform: skewX(7deg) translate(-30px);
                              }
                              7% {
                                    transform: skewX(-6deg) translate(18px);
                              }
                              9% {
                                    transform: skewX(5deg) translate(-8px);
                              }
                              10% {
                                    transform: skewX(-4deg) translate(6px);
                              }
                              11% {
                                    transform: skewX(3deg) translate(-4px);
                              }
                              12% {
                                    transform: skewX(-2deg) translate(2px);
                              }
                              13% {
                                    transform: skewX(1deg) translate(0px);
                                    filter: drop-shadow(-10px -10px 0 #24f6f0) contrast(120%)
                                          brightness(110%) blur(3px);
                              }
                              30% {
                                    filter: drop-shadow(-10px -10px 0 #24f6f0) contrast(150%)
                                          brightness(120%) blur(0px);
                              }
                        }
                  }
            }
      }
      // 重叠标签实现抖音图标
      .iframe-box18 {
            width: 360px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  background: #111;
                  height: 400px;
                  .g-container {
                        position: relative;
                        width: 200px;
                        margin: 20px auto;
                        filter: contrast(150%) brightness(110%);
                        .j {
                              position: absolute;
                              top: 50px;
                              left: 100px;
                              width: 47px;
                              height: 218px;
                              background: #24f6f0;
                              &::before {
                                    content: '';
                                    position: absolute;
                                    width: 100px;
                                    height: 100px;
                                    border: 47px solid #24f6f0;
                                    border-top: 47px solid transparent;
                                    border-radius: 50%;
                                    top: 119px;
                                    left: -147px;
                                    transform: rotate(45deg);
                              }
                              &::after {
                                    content: '';
                                    position: absolute;
                                    width: 140px;
                                    height: 140px;
                                    border: 40px solid #24f6f0;
                                    border-right: 40px solid transparent;
                                    border-top: 40px solid transparent;
                                    border-left: 40px solid transparent;
                                    top: -110px;
                                    right: -183px;
                                    border-radius: 100%;
                                    transform: rotate(45deg);
                                    z-index: -10;
                              }
                        }
                        .j:last-child {
                              left: 110px;
                              top: 60px;
                              background: #fe2d52;
                              z-index: 100;
                              mix-blend-mode: lighten;
                              animation: moveLeft 10s infinite;
                              &::before {
                                    border: 47px solid #fe2d52;
                                    border-top: 47px solid transparent;
                              }
                              &::after {
                                    border: 40px solid #fe2d52;
                                    border-right: 40px solid transparent;
                                    border-top: 40px solid transparent;
                                    border-left: 40px solid transparent;
                              }
                              @keyframes moveLeft {
                                    0% {
                                          transform: translate(200px);
                                    }
                                    50% {
                                          transform: translate(0px);
                                    }
                                    100% {
                                          transform: translate(0px);
                                    }
                              }
                        }
                  }
            }
      }

      //css实现刻度效果
      .iframe-box19 {
            width: 260px;
            height: 70px;
            margin: 20px 0 0 20px;
            float: left;
            .css-sub {
                  height: 80px;
                  background-image: repeating-linear-gradient(
                        to right,
                        rgba(247, 250, 250, 0),
                        rgba(249, 249, 249, 0) 4px,
                        #12e0be 4px,
                        #0bf5af 8px
                  );
            }
      }
}
